<template>
  <div class="student" >
    

    <div class="student_container">
      <div class="top">
        <div class="student_number">
          <span class="current_number">当前学员</span>
          <i class="icon_badge"></i>
          <span class="number">{{totalStudentNumber}}</span>
        </div>
        <div class="school_select" @click="clickScreenItem({type: 2, key:'schoolId', label: '选择校区'})">
          <span>校区</span>
          <i class="select_down"></i>
        </div>
        <div class="search_box">
          <van-field v-model="searchForm.searchValues" placeholder="请输入学员姓名/家长"  />
          <i class="icon_search" @click="search"></i>
        </div>
      </div>

      <div v-if="studentList.length == 0" class="noData">
        <img src="../../../assets/img/nodata.png" alt="">
        <p>暂时还没有数据</p>
        <p>快来手动添加吧</p>
        <span class="addData" @click="addStudent">添加</span>
      </div>

      
      <div class="content">
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="offset"
        > -->
          <div
            v-for="(item, index) in studentList" 
            :key="index" 
            @click.stop="toStudentDetail(item, $event)"
            class="student_item">
            <div class="avatar">
              <img :src="item.avatar" alt="">
            </div>
            <div class="student_info">
              <div class="info1 info">
                <span class="student_name">{{item.studentName}}</span>
                <span class="intention_level" v-if="item.bmFollowList.length > 0">意向 : {{ item.bmFollowList.length > 0 ? item.bmFollowList[0].strengthRemark : '无' }}</span>
                <div class="phone_box">
                  <i class="icon_phone"></i>
                  <a :href="`tel:${item.bmStudentParentList[0].linkPhone}`"  class="phone">{{item.bmStudentParentList[0].linkPhone}}</a>
                </div>
                <span class="status">{{item.salesStatus}}</span>
              </div>
              <div class="info2 info">
                <span class="parent_name">{{item.bmStudentParentList[0].linkPerson}}</span>
                <span class="intention_class">{{item.productName}}</span>
                <span class="time" :class="{'timeZero' : item.timeZero}">{{item.nextFollowDay || ''}}</span>
              </div>
            </div>

          </div>

          <van-pagination
            v-if="studentList.length !== 0"
            v-model="searchForm.curPage" 
            :page-count="totalPages"
            mode="simple"
            @change="changePage"
          />
        <!-- </van-list> -->
      </div>
<!-- 
      <div class="content">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="offset"
        >
          <van-cell
            v-for="item in list"
            :key="item"
            :title="item"
          />
        </van-list>
      </div>-->

      <div class="btn_add btn_circle" @click="addStudent" v-if="studentList.length !== 0">
        <i></i>
      </div>
    </div>

    <div class="popup">
      <van-popup v-model="showBottomArea" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-if="showBottomAreaType == 'date'"
          v-model="currentDate"
          type="date"
          @cancel="onCancel"
          @confirm="onConfirm"
        />

        <van-picker
          v-else
          show-toolbar
          title="请选择"
          value-key="label"
          :columns="bottomAreaList"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>

    <screen :screenList="screenList" :screenData="screenData" @searchData="searchData" @reset="reset" @schoolChange="schoolChange"></screen>

    <div class="popup_search_child">
      <van-popup v-model="showSearchChildren" class="screen_box" position="right" :style="{ height: '85%' }">
        <div class="screen_title_box">
          <i class="icon_return" @click="showSearchChildren = false;"></i>
          <span class="screen_title">校区</span>
          <span class="btn_confirm" @click="confirmChildPop">确定</span>
        </div>

        <div class="search_list">
          <van-checkbox-group v-model="checkedList">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in rightPopupList"
                clickable
                :key="item.id"
                :title="item.label"
                @click="toggle(index)"
              >
                <van-checkbox
                  :name="item.id"
                  ref="checkboxes"
                  slot="right-icon"
                />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>


        
      </van-popup>
    </div>

    <div class="icon_place" @click="screenList.showSearch = true"></div>
    

  </div>
</template>


<style>
.student .search_list {
  /* margin-top: .533333rem; */
}
.student .van-cell:not(:last-child)::after {
  border: none;
}
.student .van-collapse-item__content {
  padding-top: 0;
}
.student .van-radio {
  margin-bottom: .266667rem;
}
.student input {
  height: 100%;
  line-height: .8rem;
}
.student .top .van-cell {
  padding: 0;
  width: 5.146667rem;
  height: .8rem;
  border-radius: .466667rem;
  padding-left: .266667rem;
  font-size: 12px;
  /* color: #A7A5A5 */
}

.student .van-icon-clear {
  right: .266667rem;
}
</style>
<style scoped>
.student {
  position: relative;
}
.student .top {
  height: 1.6rem;
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
}

.student .content {
  padding: .266667rem;
  background: #fff;
  padding-bottom: 0;
  padding-top: 0;
}
.student .student_item {
  min-height: 1.333333rem;
  display: flex;
  align-items: center;
  /* padding: .15rem 0; */
}

.content .student_item:last-child .student_info {
  border-bottom: none;
}

.student_item:active {
  /* background: #f7f8fa; */
}

.student_item .avatar {
  width: 1.226667rem;
  height: 1.226667rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student_item .avatar img {
  width: 100%;
}
.student_item .student_info {
  margin-left: .16rem;
  width: 100%;
  border-bottom: .5px solid #e9e9e9;
  padding-bottom: .266667rem;
  padding-top: .233333rem;
}

.student_info .info {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
}

.student_info .student_name {
  font-size: .373333rem;
  color: #333333;
}
.student_info .intention_level {
  display: inline-block;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: .32rem;
  color: #fff;
  background: #8B9DFB;
  margin-left: .186667rem;
  margin-top: 1px;
  border-radius: .106667rem
}

.phone_box {
  margin-left: .226667rem;
}
.student_info .icon_phone {
  margin-right: .08rem;
}

.student_info .status {
  font-size: .32rem;
  color: #FFC834;
  margin-left: auto;
}

.info1 {
  margin-bottom: .066667rem;
}

.info2 {
  color: #A0A0A0;
  font-size: .32rem;
}

.parent_name {
  margin-right: .346667rem;
  white-space: nowrap
}
.intention_class {

}
.time {
  color: #FFC834;
  margin-left: auto;
  text-align: right;
  white-space: nowrap
}

.timeZero{
  color: #EF6B6B;
}

.student .top {
  display: flex;
  padding: 0 .266667rem;
  justify-content: space-between;
  align-items: center;
}

.top .student_number {
  font-size: 0;
  height: .8rem;
}

.top .current_number {
  display: block;
  font-size: .373333rem;
  color: #fff;
}
.top .icon_badge {
  display: inline-block;
  width: .4rem;
  height: .333333rem;
  background: url('../../../assets/img/icon_badge.png') 0 0 no-repeat;
  background-size: 100%;
}
.top .number {
  display: inline-block;
  text-align: center;
  line-height: .32rem;
  width: .946667rem;
  height: .32rem;
  background: #77A4FF;
  border-radius:.186667rem;
  font-size: .266667rem;
  color: #fff;
  vertical-align: top;
}



.top .school_select {
  width: 2.253333rem;
  height: .8rem;
  line-height: .8rem;
  font-size: 12px;
  color: #fff;
  border-radius: .4rem;
  background: rgba(255, 255, 255, .4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .school_select span {
  margin-left: .4rem;
}

.top .select_down {
  display: inline-block;
  width: .133333rem;
  height: .253333rem;
  background: url('../../../assets/img/icon_left.png') 0 0 no-repeat;
  background-size: 100%;
  transform: rotate(-90deg);
  margin-right: .4rem;
}

.search_box {
  position: relative;
}
.icon_search{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  background: url('../../../assets/img/icon_search.png') 0 0 no-repeat;
  background-size: 100%;
  z-index: 2;
}




</style>

<script>
import screen from '../../assembly/screen.vue'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("student");

import avatarBoy from '../../../assets/img/avatarBoy.png'
import avatarGirl from '../../../assets/img/avatarGirl.png'

export default {
  name: 'student',
  data() {
    return {
      jwtAuth: {},
      activeNames: [],
      
      list: [],
      finished: true,
      loading: false,
      isUpLoading: false,
      offset: 500,
      curPage: 1,
      totalPages: 0,

      totalStudentNumber: '',
      searchForm: {
        ages: "",
        createEndTime: "",
        createStartTime: "",
        curPage: 1,
        customerId: "",
        followCount: "",
        grade: "",
        labelManagementId: "",
        marketPersonnel: "",
        nextFollow: "",
        pageSize: 10,
        parentRelationship: "",
        personId: "",
        productId: [],
        salesStatus: "",
        schoolId: [],
        signingStatus: "",
        searchValues: '',
      },

      checkedList: [],
      rightPopupList: [],

      salesPersonRadio: '',
      showSearch: false,
      showSearchChildren: false,
      seachSalesPerson: '',
      studentList: [
      ],
      showBottomArea: false,
      showBottomAreaType: '',
      bottomAreaList: [],
      schoolList: [
      ],
      schoolIdList: [],

     /* 筛选 */
      screenData: {
        school: '',
        schoolId: [],
        contractStatus: '',
        contractStatusId: '',
        saleStatus: '',
        saleStatusId: '',
        product: '',
        productId: [],
        parentLabels: '',
        parentLabelsId: '',
        customerSource: '',
        customerSourceId: '',
        salesPerson: '',
        salesPersonId: '',
        createStartTime: "",
        createEndTime: "",
      },
      screenList: {
        showSearch: false,
        dateType: 'date',
        minDate: new Date(2019, 0, 1),
        data: [
          {
            label: '校区',
            key: 'school',
            checkType: 'checkbox',
            bottomType: 'list',
            options: [],
          },
          {
            label: '签约状态',
            key: 'contractStatus',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '销售状态',
            key: 'saleStatus',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '跟进次数',
            key: 'followNumber',
            checkType: 'radio',
            bottomType: 'timeSection',
            options: [],
          },
          {
            label: '下次跟进时间',
            key: 'nextFollow',
            checkType: 'radio',
            bottomType: 'list',
            options: [
              {
                id: '',
                label: '全部'
              },
              {
                id: '0',
                label: '今天'
              },
              {
                id: '1',
                label: '明天'
              },
              {
                id: '2',
                label: '2天后'
              },
              {
                id: '3',
                label: '3天后'
              },
              {
                id: '4',
                label: '4天后'
              },
              {
                id: '5',
                label: '5天后'
              },
              {
                id: '6',
                label: '6天后'
              },
              {
                id: '7',
                label: '7天后'
              },
              {
                id: '30',
                label: '一个月内'
              },
            ],
          },
          {
            label: '学员标签',
            key: 'parentLabels',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '意向课程',
            key: 'product',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '客户来源',
            key: 'customerSource',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '课程顾问',
            key: 'salesPerson',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '关系',
            key: 'parentRelationship',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '年级',
            key: 'grade',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '学员年龄',
            key: 'age',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          
          
          {
            label: '录入时间-开始',
            key: 'createStartTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          {
            label: '录入时间-结束',
            key: 'createEndTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          
        ],
      },
      /* end */
    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.queryAllSchool();
    this.queryAllSaleStatus();
    this.queryAllParentLabel();
    this.quertAllCustomerSource();
    this.queryAllAge();
    this.queryAllGrade();
    this.queryAllRelationship();

  },
  mounted() {

  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    reset() {
      let data = {};
      this.queryAllContractStatus(data);
      this.queryAllProduct(data);
      this.queryAllSalePerson(data);
    },

    searchData(data) {
      console.log(data);
      let searchData = {};
      searchData.schoolId = data.schoolId.length > 0 ? data.schoolId.split(',') : [];
      searchData.signingStatus = data.contractStatusId;
      searchData.salesStatus = data.saleStatusId;
      searchData.labelManagementId = data.parentLabelsId;
      searchData.productId = data.productId.length > 0 ? data.productId.split(',') : [];
      searchData.customerId = data.customerSourceId;
      searchData.personId = data.salesPersonId;
      searchData.nextFollow = data.nextFollowId;
      searchData.parentRelationship = data.parentRelationshipId;
      searchData.grade = data.gradeId;

      searchData.followCountStart = data.followNumber ? data.followNumber.split('-')[0] : '';
      searchData.followCountEnd = data.followNumber ? data.followNumber.split('-')[1] || '' : '';

      // searchData.daysNeedFollow = data.todayFollowStatusId;
      searchData.createEndTime = data.createEndTime;
      searchData.createStartTime = data.createStartTime;

      if(data.ageId == '40001') {
        searchData.ages = '0';
      }else{
        searchData.ages = parseInt(data.age);
      }


      this.screenList.showSearch = false;

      // this.searchForm = searchData
      this.initData(searchData)
    },

    initData(searchData) {
      this.isUpLoading = false;
      let data = {}
      Object.assign(data, searchData || this.searchForm);
      data.curPage = this.searchForm.curPage

      if(!data.schoolId || data.schoolId.length == 0) {
        data.schoolId = [];
        this.schoolList.forEach(item => {
          data.schoolId.push(item.schoolId);
        })
      }

      this.post({
        API: 'selectBmStudentPageList',
        data: data
      }).then(res => {
        this.totalPages = res.page.pageCount;
        this.studentList = res.data;
        this.totalStudentNumber = res.page.totalRows
        this.studentList.forEach(item => {
          if(item.nextFollowDay && item.nextFollowDay.indexOf('0') == 0) {
            item.timeZero = true;
          }

          if(item.nextFollowDay == '逾期未跟进') {
            item.timeZero = true;
          }

          item.sex == 1 ? item.avatar = avatarBoy : item.avatar = avatarGirl

          switch (item.salesStatus) {
            case '10130':
              item.salesStatus = '待跟进'
              break;
            case '10131':
              item.salesStatus = '已跟进'
              break;
            case '10132':
              item.salesStatus = '已定金'
              break;
            case '10133':
              item.salesStatus = '已试听'
              break;
            case '10134':
              item.salesStatus = '退定金'
              break;
            case '10135':
              item.salesStatus = '停止跟进'
              break;
            case '10136':
              item.salesStatus = '已购课'
              break;
          
            default:
              break;
          }

          let str = []
          item.bmStudentProductList.forEach(productItem => {
            str.push(productItem.productName);
          });
          item.productName = str.join(',');
        })
        this.isUpLoading = true;
      }).catch(err => {
        // this.$toast.fail(err);
      })
    },


    toStudentDetail(item, event) {
      if(event.srcElement.tagName == 'A') {
        return false;
      }
      this.$router.push({
        name: 'studentDetail',
        params: {
          id: item.studentId,
        }
      })
    },

    addStudent() {
      this.$router.push({
        name: 'addStudent',
      })
    },

    clcikShowBottomArea(type) {
      switch (type) {
        case 'school':
          break;
      
        default:
          break;
      }
      this.showBottomArea = true;
      this.showBottomAreaType = ''
    },

    clickScreenItem(item, index) {
      this.activeScreenKey = item.key
      console.log(this.schoolList)
      switch (item.type) {
       
        case 2:
          this.showSearchChildren = true;
          switch (this.activeScreenKey) {
            case 'schoolId':
              this.checkedList = [];
              this.rightPopupList = this.schoolList;
              break;
          
            default:
              break;
          }
          break;
       
        default:
          break;
      }
    },
    // 确认;
    confirmChildPop() {
      switch (this.activeScreenKey) {
        case 'schoolId':
          this.searchForm.schoolId = this.checkedList;
          this.initData();
          break;
      
        default:
          break;
      }

      this.showSearchChildren = false;
    },
    search() {
      this.initData();
    },

    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      console.log(this.activeScreenKey);
      if(this.activeScreenKey == 'school') {
        this.searchForm.schoolId = value.id
        this.initData();
      }
      this.searchData[this.activeScreenKey] = value;
      this.showBottomArea = false;
    },
    onCancel() {
      this.showBottomArea = false;
    },

    onLoad() {
      // 异步更新数据
      console.log('异步更新数据')
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 500);


      // setTimeout(() => {
      //   // this.$toast('加载成功');
      //   if(this.isUpLoading) {
      //     this.curPage += 1
      //     this.initData('loading', this.curPage);
      //   }
        
      // }, 500);
    },


    queryAllSchool(btnId) {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      
      this.post({
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: btnId || 'studentManagement',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res = res.filter(val => {
          return val.schoolId !== '';
        });
        res.map((val) => {
          val.label = val.schoolName;
          val.id = val.schoolId;
        })
        

        if(btnId) {
          this.powerSchoolList = res
        }else{
          this.schoolList = res
          this.schoolList.forEach(item => {
            this.searchForm.schoolId.push(item.schoolId);
          })
          this.initData();
          let data = {};
          this.queryAllContractStatus(data);
          this.queryAllProduct(data);
          this.queryAllSalePerson(data);
        }

        this.screenList.data.forEach(item => {
          if(item.key == 'school') {
            item.options = this.schoolList;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    
    /* ========  筛选组件  =========== */
    schoolChange(data) {
      console.log(data);
      this.queryAllSalePerson(data);
      this.queryAllContractStatus(data);
      this.queryAllProduct(data);
    },

    queryAllContractStatus(data) {
      // 查询 签约状态
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })
      if(!data.schoolId) {
        data.schoolId = schoolIdList
      }else{
        data.schoolId = [data.schoolId]
      }


      this.post({       
        API: 'queryByDicKeyForStudent',
        data: {
          dicKey: 'contractStatus',
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.dicCode;
          val.label = val.dicLabel;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'contractStatus') {
            item.options = res;
          }
        })
      })
    },
    queryAllSaleStatus() {
      // 查询 销售状态
      this.formGet({       
        API: 'queryByDicKey',
        data: {
          dicKey: 'saleStatus',
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.dicCode;
          val.label = val.dicLabel;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'saleStatus') {
            item.options = res;
          }
        })
      })
    },
    queryAllParentLabel() {
      this.post({
        API: 'selectBmLabelManagementPageList',
        data: {}
      }).then(res => {
        res = res.filter(val => {
          return val.remark != null;
        })
        res.map((val) => {
          val.id = val.labelManagementId;
          val.label = val.labelManagementName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'parentLabels') {
            item.options = res;
          }
        })
      })
    },
    quertAllCustomerSource() {
      this.post({
        API: 'selectBmCustomerPageList',
        data: {}
      }).then(res => {
        res.map((val) => {
          val.id = val.customerId;
          val.label = val.customerRemark;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'customerSource') {
            item.options = res;
          }
        })
      })
      
    },
    queryAllSalePerson(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })
      if(!data.schoolId) {
        data.schoolId = schoolIdList.join(',')
      }else{
        data.schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryPersonBySchoolId',
        data: {
          positionCode: '2,5,15',
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.employeesId;
          val.label = val.employeesName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'salesPerson') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllProduct(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })

      if(!data.schoolId) {
        data.schoolId = schoolIdList
      }else{
        data.schoolId = data.schoolId.join(',')
      }

      console.log(data.schoolId)

      this.formGet({
        API: 'queryProductBySchoolId',
        data: {
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.productId;
          val.label = val.productName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'product') {
            item.options = res;
          }
        })

      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllAge() {
      this.formGet({       
        API: 'queryByDicKey',
        data: {
          dicKey: 'studentAge',
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.dicCode;
          val.label = val.dicLabel;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'age') {
            item.options = res;
          }
        })
      })
    },
    queryAllGrade() {
      this.formGet({ 
        API: 'queryByDicKey',
        data: {
          dicKey: 'grade',
        }
      }).then(res => {
        res.map((val) => {
          val.label = val.dicLabel;
          val.id = val.dicCode;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'grade') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllRelationship() {
      this.formGet({ 
        API: 'queryByDicKey',
        data: {
          dicKey: 'parentRelationship',
        }
      }).then(res => {
        res.map((val) => {
          val.label = val.dicLabel;
          val.id = val.dicCode;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'parentRelationship') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },




    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },


    changePage(e) {
      console.log(e)
      this.searchForm.curPage = e;
      this.initData();
    }

    
    
  },
  computed: {
    ...mapState([
    ]),
    
   
  },
  components: {
    screen,
  },
}

</script>